<template>
  <view class="page">
    <Header :title="'我的'"></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb
          :text="'我的-今日复习-' + dateTime + '-' + stepName + '-查看错词'"
        >
        </Breadcrumb>
        <view class="content">
          <view class="list">
            <view
              class="item"
              v-for="(item, index) in list"
              :key="index"
              @click="handleClickWord(index)"
            >
              <view class="item_title"> {{ item.chapterName }} </view>
              <view
                class="item_text"
                :class="{
                  color1: item.clickCount % 4 === 1,
                  color2: item.clickCount % 4 === 2,
                  color3: item.clickCount % 4 === 3,
                }"
              >
                <template v-if="item.clickCount % 4 === 0"> </template>
                <template
                  v-else-if="
                    item.clickCount % 4 === 1 || item.clickCount % 4 === 2
                  "
                >
                  {{ item.word }}
                </template>
                <template v-else-if="item.clickCount % 4 === 3">
                  {{ item.wordParaphrase }}
                </template>
              </view>
              <view class="item_icon"> </view>
            </view>
          </view>
          <view class="btn">
            <view class="btn_content" @click="">
              <text>重新学习</text>
            </view>
            <view class="btn_content">
              <text>取消</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getErrWordsByFx } from "@/api/sync";
export default {
  components: {},
  data() {
    return {
      id: "",
      dateTime: "",
      stepName: "",
      list: [],
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.dateTime = options.dateTime;
    this.stepName = options.stepName;
    this.getData();
  },
  methods: {
    getData() {
      getErrWordsByFx(this.id).then((res) => {
        let data = res.data;
        let arr = [];
        data.forEach((item) => {
          arr.push({
            chapterId: item.chapterId,
            chapterName: item.chapter.chapterName,
            word: item.word,
            wordParaphrase: item.wordParaphrase,
            clickCount: 0,
          });
        });
        this.list = arr;
      });
    },
    handleClickWord(index) {
      this.list[index].clickCount++;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./wrongWords.scss";
</style>
